<template>
  <div id="app">
    <div id="particles-js"></div>
    <router-view/>
  </div>
</template>

<script>
  import particles from 'particles.js'
  import particlesConfig from '../public/particlesConfig.json' //引入配置

  export default {
    name: 'App',
    watch:{
      $route(to){
      }
    },
    mounted() {
      //只在pc端渲染动态背景，移动端会造成卡顿
      if(this.$store.state.isPC){
        particlesJS('particles-js', particlesConfig); //渲染动态粒子背景
      }

    },
    created() {
      let userAgent = navigator.userAgent.toLowerCase()
      if(userAgent.match(/android/i) == "android"
              || userAgent.match(/iphone os/i) == "iphone os"
              || userAgent.match(/ipad/i) == "ipad"){
        this.$store.state.isPC = false
      }
    }
  }
</script>

<style>
  #app{
    min-height: 100vh;
    zoom: 1;
  }
  body{
    margin: 0;
    padding: 0;
  }
  #particles-js{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #f5f4f5;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    Z-index: -1;
  }
</style>
